<script lang="ts" setup>
import aForm from "@/components/form/index.vue";
// import {defineModel , defineEmits} from 'vue'
const open = defineModel({
  type: Boolean,
  default: false,
});

const formData = reactive([
  {
    type: "login",
    title: "登录",
    data: [
      {
        id: 1,
        label: "",
        formType: "input",
        textType: "number",
        placeholder: "请输入手机号",
        rules: [
          {
            maxLength: 18,
            trigerOut: "长度超过了, 请重新输入",
          },
        ],
      },
      {
        id: 2,
        label: "",
        formType: "input",
        textType: "Verify",
        placeholder: "请输入验证码",
        rules: [
          {
            minLength: 6,
            trigerOut: "长度应大于等于6位, 请重新输入",
          },
        ],
      },
    ],
  },
  {
    type: "register",
    title: "注册",
    data: [
      {
        id: 3,
        label: "",
        formType: "input",
        textType: "number",
        placeholder: "请输入账号",
        rules: [
          {
            maxLength: 18,
            trigerOut: "长度超过了, 请重新输入",
          },
        ],
      },
      {
        id: 4,
        label: "",
        formType: "input",
        textType: "Verify",
        placeholder: "请输入验证码",
        rules: [
          {
            minLength: 6,
            trigerOut: "长度应大于等于6位, 请重新输入",
          },
        ],
      },
    ],
  },
]);
</script>

<template>
  <!-- 登录注册表单组件 -->
  <div v-if="open" class="modal">
    <a-form
      method="post"
      v-model="formData"
      title="登录注册"
      title-type="tab"
    ></a-form>
  </div>
</template>

<style scoped lang="scss">
.modal {
  position: fixed;
  height: 100%;
  width: 100%;
  left: 0;
  z-index: 1000;
  background-color: #0000007a;
  display: flex;
  align-items: center;
  justify-content: center;

  form {
    width: 40%;
    min-width: max-content;
    background-color: #fff;
    max-height: 600px;
    min-height: max-content;
  }
}
</style>
